﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebFood</title>
    <link rel="stylesheet" href="styles/index.css">
</head>
<body>
<header id="main-header">
    <a href="index.html" id="logo">WebFood</a>
    <nav>
        <ul>
            <li>
                <a href="">Browse Meals</a>
            </li>
            <li>
                <a href="">My Orders</a>
            </li>
        </ul>
    </nav>
    <!--Hamburger Button-->
    <a href="#side-drawer" class="menu-btn">
        <span></span>
        <span></span>
        <span></span>
    </a>
</header>


<!--Side Drawer-->
<aside id="side-drawer">
    <header>
        <!--Hamburger Button-->
        <a href="#" class="menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </header>
    <nav>
        <ul>
            <li>
                <a href="">Browse Meals</a>
            </li>
            <li>
                <a href="">My Orders</a>
            </li>
        </ul>
    </nav>
</aside>

<main>
    <h1>Browse Our Delicious Meals</h1>
    <section id="latest-products">
        <ul>
            <li class="food-item">
                <article>
                    <img src="images/1.jpg" alt="Pizza with Tiger Prawns">
                    <div class="food-item-content">
                        <h2>Pizza with Tiger Prawns</h2>
                        <a href="" class="btn">Add to Cart</a>
                    </div>
                </article>
            </li>
            <li class="food-item">
                <article>
                    <img src="images/2.jpg" alt="Cheeseburgers with Sugar">
                    <div class="food-item-content">
                        <h2>Cheeseburgers with Sugar</h2>
                        <a href="" class="btn">Add to Cart</a>
                    </div>
                </article>
            </li>
        </ul>
    </section>
</main>
<footer>

</footer>
</body>
</html>